<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .google-red-100{color: #f4c7c3;}
    .google-red-300{color: #e67c73;}
    .google-red-500{color: #db4437;}
    .google-red-700{color: #c53929;}
    .google-blue-100{color: #c6dafc;}
    .google-blue-300{color: #7baaf7;}
    .google-blue-500{color: #4285f4;}
    .google-blue-700{color: #3367d6;}
    .google-green-100{color: #b7e1cd;}
    .google-green-300{color: #57bb8a;}
    .google-green-500{color: #0f9d58;}
    .google-green-700{color: #0b8043;}
    .google-yellow-100{color: #fce8b2;}
    .google-yellow-300{color: #f7cb4d;}
    .google-yellow-500{color: #f4b400;}
    .google-yellow-700{color: #f09300;}
    .google-grey-100{color: #f5f5f5;}
    .google-grey-300{color: #e0e0e0;}
    .google-grey-500{color: #9e9e9e;}
    .google-grey-700{color: #616161;}
    .paper-red-50{color: #ffebee;}
    .paper-red-100{color: #ffcdd2;}
    .paper-red-200{color: #ef9a9a;}
    .paper-red-300{color: #e57373;}
    .paper-red-400{color: #ef5350;}
    .paper-red-500{color: #f44336;}
    .paper-red-600{color: #e53935;}
    .paper-red-700{color: #d32f2f;}
    .paper-red-800{color: #c62828;}
    .paper-red-900{color: #b71c1c;}
    .paper-red-a100{color: #ff8a80;}
    .paper-red-a200{color: #ff5252;}
    .paper-red-a400{color: #ff1744;}
    .paper-red-a700{color: #d50000;}
    .paper-pink-50{color: #fce4ec;}
    .paper-pink-100{color: #f8bbd0;}
    .paper-pink-200{color: #f48fb1;}
    .paper-pink-300{color: #f06292;}
    .paper-pink-400{color: #ec407a;}
    .paper-pink-500{color: #e91e63;}
    .paper-pink-600{color: #d81b60;}
    .paper-pink-700{color: #c2185b;}
    .paper-pink-800{color: #ad1457;}
    .paper-pink-900{color: #880e4f;}
    .paper-pink-a100{color: #ff80ab;}
    .paper-pink-a200{color: #ff4081;}
    .paper-pink-a400{color: #f50057;}
    .paper-pink-a700{color: #c51162;}
    .paper-purple-50{color: #f3e5f5;}
    .paper-purple-100{color: #e1bee7;}
    .paper-purple-200{color: #ce93d8;}
    .paper-purple-300{color: #ba68c8;}
    .paper-purple-400{color: #ab47bc;}
    .paper-purple-500{color: #9c27b0;}
    .paper-purple-600{color: #8e24aa;}
    .paper-purple-700{color: #7b1fa2;}
    .paper-purple-800{color: #6a1b9a;}
    .paper-purple-900{color: #4a148c;}
    .paper-purple-a100{color: #ea80fc;}
    .paper-purple-a200{color: #e040fb;}
    .paper-purple-a400{color: #d500f9;}
    .paper-purple-a700{color: #aa00ff;}
    .paper-deep-purple-50{color: #ede7f6;}
    .paper-deep-purple-100{color: #d1c4e9;}
    .paper-deep-purple-200{color: #b39ddb;}
    .paper-deep-purple-300{color: #9575cd;}
    .paper-deep-purple-400{color: #7e57c2;}
    .paper-deep-purple-500{color: #673ab7;}
    .paper-deep-purple-600{color: #5e35b1;}
    .paper-deep-purple-700{color: #512da8;}
    .paper-deep-purple-800{color: #4527a0;}
    .paper-deep-purple-900{color: #311b92;}
    .paper-deep-purple-a100{color: #b388ff;}
    .paper-deep-purple-a200{color: #7c4dff;}
    .paper-deep-purple-a400{color: #651fff;}
    .paper-deep-purple-a700{color: #6200ea;}
    .paper-indigo-50{color: #e8eaf6;}
    .paper-indigo-100{color: #c5cae9;}
    .paper-indigo-200{color: #9fa8da;}
    .paper-indigo-300{color: #7986cb;}
    .paper-indigo-400{color: #5c6bc0;}
    .paper-indigo-500{color: #3f51b5;}
    .paper-indigo-600{color: #3949ab;}
    .paper-indigo-700{color: #303f9f;}
    .paper-indigo-800{color: #283593;}
    .paper-indigo-900{color: #1a237e;}
    .paper-indigo-a100{color: #8c9eff;}
    .paper-indigo-a200{color: #536dfe;}
    .paper-indigo-a400{color: #3d5afe;}
    .paper-indigo-a700{color: #304ffe;}
    .paper-blue-50{color: #e3f2fd;}
    .paper-blue-100{color: #bbdefb;}
    .paper-blue-200{color: #90caf9;}
    .paper-blue-300{color: #64b5f6;}
    .paper-blue-400{color: #42a5f5;}
    .paper-blue-500{color: #2196f3;}
    .paper-blue-600{color: #1e88e5;}
    .paper-blue-700{color: #1976d2;}
    .paper-blue-800{color: #1565c0;}
    .paper-blue-900{color: #0d47a1;}
    .paper-blue-a100{color: #82b1ff;}
    .paper-blue-a200{color: #448aff;}
    .paper-blue-a400{color: #2979ff;}
    .paper-blue-a700{color: #2962ff;}
    .paper-light-blue-50{color: #e1f5fe;}
    .paper-light-blue-100{color: #b3e5fc;}
    .paper-light-blue-200{color: #81d4fa;}
    .paper-light-blue-300{color: #4fc3f7;}
    .paper-light-blue-400{color: #29b6f6;}
    .paper-light-blue-500{color: #03a9f4;}
    .paper-light-blue-600{color: #039be5;}
    .paper-light-blue-700{color: #0288d1;}
    .paper-light-blue-800{color: #0277bd;}
    .paper-light-blue-900{color: #01579b;}
    .paper-light-blue-a100{color: #80d8ff;}
    .paper-light-blue-a200{color: #40c4ff;}
    .paper-light-blue-a400{color: #00b0ff;}
    .paper-light-blue-a700{color: #0091ea;}
    .paper-cyan-50{color: #e0f7fa;}
    .paper-cyan-100{color: #b2ebf2;}
    .paper-cyan-200{color: #80deea;}
    .paper-cyan-300{color: #4dd0e1;}
    .paper-cyan-400{color: #26c6da;}
    .paper-cyan-500{color: #00bcd4;}
    .paper-cyan-600{color: #00acc1;}
    .paper-cyan-700{color: #0097a7;}
    .paper-cyan-800{color: #00838f;}
    .paper-cyan-900{color: #006064;}
    .paper-cyan-a100{color: #84ffff;}
    .paper-cyan-a200{color: #18ffff;}
    .paper-cyan-a400{color: #00e5ff;}
    .paper-cyan-a700{color: #00b8d4;}
    .paper-teal-50{color: #e0f2f1;}
    .paper-teal-100{color: #b2dfdb;}
    .paper-teal-200{color: #80cbc4;}
    .paper-teal-300{color: #4db6ac;}
    .paper-teal-400{color: #26a69a;}
    .paper-teal-500{color: #009688;}
    .paper-teal-600{color: #00897b;}
    .paper-teal-700{color: #00796b;}
    .paper-teal-800{color: #00695c;}
    .paper-teal-900{color: #004d40;}
    .paper-teal-a100{color: #a7ffeb;}
    .paper-teal-a200{color: #64ffda;}
    .paper-teal-a400{color: #1de9b6;}
    .paper-teal-a700{color: #00bfa5;}
    .paper-green-50{color: #e8f5e9;}
    .paper-green-100{color: #c8e6c9;}
    .paper-green-200{color: #a5d6a7;}
    .paper-green-300{color: #81c784;}
    .paper-green-400{color: #66bb6a;}
    .paper-green-500{color: #4caf50;}
    .paper-green-600{color: #43a047;}
    .paper-green-700{color: #388e3c;}
    .paper-green-800{color: #2e7d32;}
    .paper-green-900{color: #1b5e20;}
    .paper-green-a100{color: #b9f6ca;}
    .paper-green-a200{color: #69f0ae;}
    .paper-green-a400{color: #00e676;}
    .paper-green-a700{color: #00c853;}
    .paper-light-green-50{color: #f1f8e9;}
    .paper-light-green-100{color: #dcedc8;}
    .paper-light-green-200{color: #c5e1a5;}
    .paper-light-green-300{color: #aed581;}
    .paper-light-green-400{color: #9ccc65;}
    .paper-light-green-500{color: #8bc34a;}
    .paper-light-green-600{color: #7cb342;}
    .paper-light-green-700{color: #689f38;}
    .paper-light-green-800{color: #558b2f;}
    .paper-light-green-900{color: #33691e;}
    .paper-light-green-a100{color: #ccff90;}
    .paper-light-green-a200{color: #b2ff59;}
    .paper-light-green-a400{color: #76ff03;}
    .paper-light-green-a700{color: #64dd17;}
    .paper-lime-50{color: #f9fbe7;}
    .paper-lime-100{color: #f0f4c3;}
    .paper-lime-200{color: #e6ee9c;}
    .paper-lime-300{color: #dce775;}
    .paper-lime-400{color: #d4e157;}
    .paper-lime-500{color: #cddc39;}
    .paper-lime-600{color: #c0ca33;}
    .paper-lime-700{color: #afb42b;}
    .paper-lime-800{color: #9e9d24;}
    .paper-lime-900{color: #827717;}
    .paper-lime-a100{color: #f4ff81;}
    .paper-lime-a200{color: #eeff41;}
    .paper-lime-a400{color: #c6ff00;}
    .paper-lime-a700{color: #aeea00;}
    .paper-yellow-50{color: #fffde7;}
    .paper-yellow-100{color: #fff9c4;}
    .paper-yellow-200{color: #fff59d;}
    .paper-yellow-300{color: #fff176;}
    .paper-yellow-400{color: #ffee58;}
    .paper-yellow-500{color: #ffeb3b;}
    .paper-yellow-600{color: #fdd835;}
    .paper-yellow-700{color: #fbc02d;}
    .paper-yellow-800{color: #f9a825;}
    .paper-yellow-900{color: #f57f17;}
    .paper-yellow-a100{color: #ffff8d;}
    .paper-yellow-a200{color: #ffff00;}
    .paper-yellow-a400{color: #ffea00;}
    .paper-yellow-a700{color: #ffd600;}
    .paper-amber-50{color: #fff8e1;}
    .paper-amber-100{color: #ffecb3;}
    .paper-amber-200{color: #ffe082;}
    .paper-amber-300{color: #ffd54f;}
    .paper-amber-400{color: #ffca28;}
    .paper-amber-500{color: #ffc107;}
    .paper-amber-600{color: #ffb300;}
    .paper-amber-700{color: #ffa000;}
    .paper-amber-800{color: #ff8f00;}
    .paper-amber-900{color: #ff6f00;}
    .paper-amber-a100{color: #ffe57f;}
    .paper-amber-a200{color: #ffd740;}
    .paper-amber-a400{color: #ffc400;}
    .paper-amber-a700{color: #ffab00;}
    .paper-orange-50{color: #fff3e0;}
    .paper-orange-100{color: #ffe0b2;}
    .paper-orange-200{color: #ffcc80;}
    .paper-orange-300{color: #ffb74d;}
    .paper-orange-400{color: #ffa726;}
    .paper-orange-500{color: #ff9800;}
    .paper-orange-600{color: #fb8c00;}
    .paper-orange-700{color: #f57c00;}
    .paper-orange-800{color: #ef6c00;}
    .paper-orange-900{color: #e65100;}
    .paper-orange-a100{color: #ffd180;}
    .paper-orange-a200{color: #ffab40;}
    .paper-orange-a400{color: #ff9100;}
    .paper-orange-a700{color: #ff6500;}
    .paper-deep-orange-50{color: #fbe9e7;}
    .paper-deep-orange-100{color: #ffccbc;}
    .paper-deep-orange-200{color: #ffab91;}
    .paper-deep-orange-300{color: #ff8a65;}
    .paper-deep-orange-400{color: #ff7043;}
    .paper-deep-orange-500{color: #ff5722;}
    .paper-deep-orange-600{color: #f4511e;}
    .paper-deep-orange-700{color: #e64a19;}
    .paper-deep-orange-800{color: #d84315;}
    .paper-deep-orange-900{color: #bf360c;}
    .paper-deep-orange-a100{color: #ff9e80;}
    .paper-deep-orange-a200{color: #ff6e40;}
    .paper-deep-orange-a400{color: #ff3d00;}
    .paper-deep-orange-a700{color: #dd2c00;}
    .paper-brown-50{color: #efebe9;}
    .paper-brown-100{color: #d7ccc8;}
    .paper-brown-200{color: #bcaaa4;}
    .paper-brown-300{color: #a1887f;}
    .paper-brown-400{color: #8d6e63;}
    .paper-brown-500{color: #795548;}
    .paper-brown-600{color: #6d4c41;}
    .paper-brown-700{color: #5d4037;}
    .paper-brown-800{color: #4e342e;}
    .paper-brown-900{color: #3e2723;}
    .paper-grey-50{color: #fafafa;}
    .paper-grey-100{color: #f5f5f5;}
    .paper-grey-200{color: #eeeeee;}
    .paper-grey-300{color: #e0e0e0;}
    .paper-grey-400{color: #bdbdbd;}
    .paper-grey-500{color: #9e9e9e;}
    .paper-grey-600{color: #757575;}
    .paper-grey-700{color: #616161;}
    .paper-grey-800{color: #424242;}
    .paper-grey-900{color: #212121;}
    .paper-blue-grey-50{color: #eceff1;}
    .paper-blue-grey-100{color: #cfd8dc;}
    .paper-blue-grey-200{color: #b0bec5;}
    .paper-blue-grey-300{color: #90a4ae;}
    .paper-blue-grey-400{color: #78909c;}
    .paper-blue-grey-500{color: #607d8b;}
    .paper-blue-grey-600{color: #546e7a;}
    .paper-blue-grey-700{color: #455a64;}
    .paper-blue-grey-800{color: #37474f;}
    .paper-blue-grey-900{color: #263238;}

    </style>
</head>
<body>
        <h1>YiiBai DOM example </h1>
        <div>
           <b>Name:</b> <span id="name"></span><br>
           <b>Company:</b> <span id="company"></span><br>
           <b>Phone:</b> <span id="phone"></span>
        </div>
        <script>
           if (window.XMLHttpRequest)
           {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
           }
           else
           {// code for IE6, IE5
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
           xmlhttp.open("GET","./stu.xml",false);
           xmlhttp.send();
           xmlDoc=xmlhttp.responseXML;
  
           document.getElementById("name").innerHTML=
           xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
           document.getElementById("company").innerHTML=
           xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;
           document.getElementById("phone").innerHTML=
           xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
        </script>
</body>
</html>